<template>
    <div>
        <van-nav-bar
        border
        title="零钱提现"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="content">
            <div class="content_main">
                <div><van-cell title="到账银行卡" center value="**银行：尾号(6688)" is-link/></div>
            </div>
            <div class="input">
                <div style="margin:20px">到账金额</div>
                <van-field v-model="number" 
                type="number" center label="￥" />
                 <div style="margin:20px;color:#cecece">剩余金额&nbsp;￥{{moneyData.money}}</div>
                 <div class="cashOut_bt">
                    <van-button color="#e2e2e2" type="default" round block @click="invest">提现</van-button>
                 </div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapStates,mapActions, mapState} from 'vuex'
import Vue from 'vue';
import { Dialog,Notify } from 'vant';
export default {
    data(){
        return{
            number:''
        }
    },
    created(){
        this.toLoadMoneyData(localStorage.getItem('id'))
    },
    computed:{
        ...mapState('money',['money',"moneyData"]),
        ...mapState('money',['recharge'])
    },
    methods:{
        ...mapActions('money',['toLoadMoney',"toLoadMoneyData"]),
        ...mapActions('money',['Loadrecharge']),
        onClickLeft(){
            this.$router.push({path:'money'})
        },
        invest(){
             Dialog.confirm({
                title: '是否提现',
                message: '提现后两小时内到账',
                })
                .then(() => {
                    if(this.moneyData.money>this.number){
                        let obj={
                            id:this.$route.query.id,
                            money:-(this.number)
                        }
                        this.Loadrecharge(obj).then(r=>{
                            this.toLoadMoney(this.$route.query.id)
                            Notify({ type: 'success', message: '提现成功' });
                            this.number = ''
                            this.$router.push({path:'money'})
                        })
                    }else{
                        Notify({ type: 'warning', message: '余额不足' });
                        this.number = ''
                        this.$router.push({path:'money'})

                        
                    }
                })
                .catch(() => {
                    // on cancel
                });
        }
    }
}
</script>
<style scoped>
.content{
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.content_main{
    width: 100%;
    height: 142px;
    background-color: #f1f1f1;
    overflow: hidden;

}
.content_main>div{
    margin-top: 42px;
}
.van-cell.van-cell--clickable{
    background-color: transparent;
}
.input{
    width: 100%;
    height: 142px;
}
.van-cell.van-field{
    margin-top: 40px;
    font-size: 20px;
    margin-bottom: 30px;
}
.content div:last-child{
    color: black;
}
.cashOut_bt{
    margin:0 50px;
}
</style>